<template>
    <div>
        <h1>排房</h1>
        <input type="button" class="btn btn-success" value="排房增加" @click="ok" />
        <table class="table table-bordered">
            <tbody> 
                <tr>
                    <td>房型</td>
                    <td>未排</td>
                    <td>已排</td>
                    <td>选择房号</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in infoc.list":key="item.id":value="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.wei}}</td>
                    <td>{{item.yi}}</td>
                    <td>{{item.state}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.id)" />
                        <input type="button" value="修改" class="btn btn-info" @click="upd(item.id)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            当前第{{ infoq.pageindex }}页/共{{ infoc.totacount }}条/共{{ infoc.totapage }}页
            <input type="button" value="首页" @click="Fen(1)" />
            <input type="button" value="上一页" @click="Fen(infoq.pageindex-1)" />
            <input type="button" value="下一页" @click="Fen(infoq.pageindex+1)" />
            <input type="button" value="尾页" @click="Fen(infoc.totapage)" />
        </div>
    </div>
</template>

<script setup lang="ts">

import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';

const route=useRoute();
const router=useRouter();

const ok=()=>{
    router.push('/RoomPAdd');
}

//取数据
const infoq:any=reactive({
    pageindex:1,
    pagesize:3,
    roomname:'',
    beizhu:''
})
//传数据
const infoc:any=reactive({
    list:[],
    totacount:0,
    totapage:0
})

//分页
const Fen=(num:any)=>{
    if(num<1){
        infoq.pageindex=1;
        return;
    }
    if(num> infoc.totapage){
        infoq.pageindex=infoc.totapage;
        return;
    }
    infoq.pageindex=num;
    getList();
}


//钩子函数
onMounted(()=>{
    getList();
})
//显示
const getList=()=>{
    axios({
        url:'/api/RoomP/GetList',
        method:'get',
        params:infoq
    })
    .then(res=>{
        console.log(res);
        infoc.list=res.data.list;
        infoc.totacount=res.data.totacount;
        infoc.totapage=res.data.totapage;
    })
    .catch(err=>{
        console.log(err);
    })
}
//删除
const del=(id:any)=>{
   var d=confirm('确定要删除吗?');
     if(d){
            axios({
            url:'/api/RoomP/Del',
            method:'delete',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功!');
                getList();
            }
            else{
                alert('删除失败!');
            }
        })
     }
}

const upd=(xid:any)=>{
    router.push({
        path:'/RoomPXiu',
        query:{
            id:xid
        }
    })
}



</script>